<template>
  <view class="container">
  <!-- <CustomNavbar title="登录"/> -->

    <!-- 主内容区 -->
    <view class="content">
      <text class="title">您好，欢迎登录宮補堂</text>
     
      <!-- 表单区域 -->
      <view class="form">
      <view class="input">
		<image src="/static/index_slices/account.png" mode="widthFix"></image>
      	<input
      	  placeholder="请输入账号" 
      	  placeholder-class="placeholder"
		  v-model="formData.username"
      	/>
      </view>
        <view class="input">
			<image src="/static/index_slices/pwd.png" mode="widthFix"></image>
        	<input
        	  password 
        	  placeholder="请输入密码" 
        	  placeholder-class="placeholder"
			  v-model="formData.password"
        	/>
        </view>

        <view class="forget-pwd" >
			<text class="link-text register" @click="toRegister">注册</text>
          <!-- <text class="link-text" @click="toForgetPwd">忘记密码？</text> -->
        </view>

        <button class="login-btn" @click="login">登录</button>

        
      </view>
	  <view class="agreement">
	   <image :src="isChecked?'/static/index_slices/checked.png':'/static/index_slices/check.png'" mode="widthFix"  @click="isChecked=!isChecked"></image>
	   <text>我已阅读并同意</text>《宮補堂 <navigator class="link-text">登录协议</navigator>》
	  </view>
	  <text class="tipInfo" v-if="!isChecked&&!agree">请阅读并同意协议</text>
    </view>
	
  </view>
</template>
<script setup>
	import {reactive, ref} from 'vue'
	import CustomNavbar from '@/components/CustomNavbar.vue';
	// 选中状态
	const isChecked = ref(false)
	const agree = ref(true)
	const formData = reactive({
		username:'',
		password:''
	})
	// to忘记密码
	const toForgetPwd = ()=>{
		uni.navigateTo({
			url:'/pages/login/forget-pwd'
		})
	}
	// 注册
	const toRegister = ()=>{
		uni.navigateTo({
			url:'/pages/login/register'
		})
	}
	// 登录
	const login = ()=>{
		if(!isChecked.value) return agree.value=false
		uni.$api.user.login(formData).then(res => {
			if(res.code == 200){
				uni.showToast({
					title: res.msg
				})
				uni.setStorageSync('user_token', res.data.user_token)
				setTimeout(function(){
					uni.switchTab({
						url:'/pages/my/my'
					})
				},1000)
			}
		})
		
	}
</script>
<style scoped lang="scss">
.container {
  width: 100%;
  height: 100vh;
  background: linear-gradient(0deg, #F3F6FA, #FF413B);
  background-size: 100% 100%;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  // height: calc(100vh - 88rpx);
  // padding-top: 28rpx;
  color: #ffffff;
}



.content {
  box-sizing: border-box;
  flex: 1;
  padding:180rpx 60rpx;
  display: flex;
  flex-direction: column;
 
}

.title {
  font-size: 46rpx;
  font-weight: bold;
  margin-bottom: 61rpx;
  text-align: left;
}

.welcome {
  font-size: 28rpx;
  color: #999;
  margin-bottom: 80rpx;
}

.form {
  width: 100%;
  image{
	  width: 25rpx;
	  margin: 0 18rpx 0 26rpx;
  }
}

.input {
  width: 100%;
  box-sizing: border-box;
  height: 94rpx;
  margin-bottom: 40rpx;
  font-size: 28rpx;
  background-color: #F7F7F7;
  border-radius: 26rpx;
  display: flex;
  align-items: center;
  color: #000;
  .placeholder{
	  color: #999;
  }
}

.forget-pwd {
	color: #fff;
	text-align: right;
	margin-top: 45rpx;
	margin-bottom: 217rpx;
	.lien-text{
		font-size: 28rpx;
		color: #fff;
	}
	.register{
		padding-right:40rpx;
	}
}

.login-btn {
  width: 620rpx;
  height: 98rpx;
  background: linear-gradient(to right,#FF5A55,#FD3832);
  color: white;
  font-size: 36rpx;
  border-radius:10rpx;
  line-height: 98rpx;
  border:none;
}




.agreement {
  margin-top: 50rpx;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 24rpx;
  color: #666;
  image{
	  width: 26rpx;
	  margin-right: 15rpx;
	  margin-left: 10rpx;
  }
  .link-text {
	  position: relative;
	  color: #0090FF;
		text-decoration: underline;
    // margin-left: 8rpx;
  }
}

</style>